<template>
    <div class="main">
        <el-card class="head-info-card info-card" shadow="never">
            <div class="head-info">
                <div class="personal-avatar">
                    <img src="@/assets/images/wy.png" alt="">
                </div>
                <div>
                    <div class="personal-nickname">
                        <span>wHitE_</span>
                        <el-tag size="small">
                            码龄100年
                        </el-tag>
                    </div>
                    <div class="personal-homepage">
                        <span>查看</span>
                        <el-divider direction="vertical" />
                        <el-button round>
                            个人主页
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </el-button>
                    </div>
                </div>
            </div>
        </el-card>
        <el-card class="personal-info-card info-card" shadow="never">
            <template #header>
                <div class="card-head">
                    <h3>基本信息</h3>
                </div>
            </template>
            <div class="personal-info">
                <el-form :model="personalInfoForm" label-width="120px" label-position="left">
                    <el-form-item label="用户昵称" class="personalForm-item">
                        <el-input v-if="nicknameEdit" class="personalInfoInput" v-model="personalInfoForm.nickname" />
                        <div v-if="nicknameEdit" class="btn-box">
                            <el-button type="primary" round size="small">确认</el-button>
                            <el-button round size="small" @click="nicknameEdit = false">取消</el-button>
                        </div>
                        <span v-if="!nicknameEdit" class="text">{{ personalInfoForm.nickname }}</span>
                        <span v-if="!nicknameEdit" class="edit-button" @click="nicknameEdit = true">
                            <el-icon>
                                <Edit />
                            </el-icon>
                            编辑
                        </span>
                    </el-form-item>
                    <el-form-item label="姓名 " class="personalForm-item">
                        <el-input v-if="nameEdit" class="personalInfoInput" v-model="personalInfoForm.name" />
                        <div v-if="nameEdit" class="btn-box">
                            <el-button type="primary" round size="small">确认</el-button>
                            <el-button round size="small" @click="nameEdit = false">取消</el-button>
                        </div>
                        <span v-if="!nameEdit" class="text">{{ personalInfoForm.name }}</span>
                        <span v-if="!nameEdit" class="edit-button" @click="nameEdit = true">
                            <el-icon>
                                <Edit />
                            </el-icon>
                            编辑
                        </span>
                    </el-form-item>
                    <el-form-item label="性别" class="personalForm-item">
                        <el-radio-group v-if="genderEdit" class="personalInfoInput" v-model="personalInfoForm.gender">
                            <el-radio :label="'男'">男</el-radio>
                            <el-radio :label="'女'">女</el-radio>
                            <span class="btn-box">
                                <el-button type="primary" round size="small">确认</el-button>
                                <el-button round size="small" @click="genderEdit = false">取消</el-button>
                            </span>
                        </el-radio-group>
                        <span v-if="!genderEdit" class="text">{{ personalInfoForm.gender }}</span>
                        <span v-if="!genderEdit" class="edit-button" @click="genderEdit = true">
                            <el-icon>
                                <Edit />
                            </el-icon>
                            编辑
                        </span>
                    </el-form-item>
                    <el-form-item label="个人简介" class="personalForm-item">
                        <div>
                            <div class="personalFormTextArea-item">
                                <el-input v-if="descEdit" type="textarea" :rows="4" class="personalInfoInputTextArea"
                                    v-model="personalInfoForm.desc" resize="none" :maxlength="300"
                                    :show-word-limit="true" />
                                <span v-if="!descEdit" class="text">{{ personalInfoForm.desc }}</span>
                                <span v-if="!descEdit" class="edit-button" @click="descEdit = true">
                                    <el-icon>
                                        <Edit />
                                    </el-icon>
                                    <span>编辑</span>
                                </span>
                            </div>
                            <div v-if="descEdit" class="textarea-btn-box">
                                <el-button type="primary" round size="small">确认</el-button>
                                <el-button round size="small" @click="descEdit = false">取消</el-button>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="所在地区" class="personalForm-item">
                        <el-cascader v-if="addressEdit" class="personalInfoInput" v-model="personalInfoForm.address"
                            :options="personalFormOption" />
                        <div v-if="addressEdit" class="btn-box">
                            <el-button type="primary" round size="small">确认</el-button>
                            <el-button round size="small" @click="addressEdit = false">取消</el-button>
                        </div>
                        <span v-if="!addressEdit" class="text">{{ personalInfoForm.address }}</span>
                        <span v-if="!addressEdit" class="edit-button" @click="addressEdit = true">
                            <el-icon>
                                <Edit />
                            </el-icon>
                            <span>编辑</span>
                        </span>
                    </el-form-item>
                    <el-form-item label="出生日期" class="personalForm-item">
                        <el-date-picker v-if="birthdayEdit" class="personalInfoInput" v-model="personalInfoForm.birthday"
                            value-format="YYYY-MM-DD" />
                        <div v-if="birthdayEdit" class="btn-box">
                            <el-button type="primary" round size="small">确认</el-button>
                            <el-button round size="small" @click="birthdayEdit = false">取消</el-button>
                        </div>
                        <span v-if="!birthdayEdit" class="text">{{ personalInfoForm.birthday }}</span>
                        <span v-if="!birthdayEdit" class="edit-button" @click="birthdayEdit = true">
                            <el-icon>
                                <Edit />
                            </el-icon>
                            <span>编辑</span>
                        </span>
                    </el-form-item>
                    <el-form-item label="开始工作" class="personalForm-item">
                        <el-date-picker v-if="workTimeEdit" class="personalInfoInput" v-model="personalInfoForm.workTime"
                            type="month" value-format="YYYY-MM" />
                        <div v-if="workTimeEdit" class="btn-box">
                            <el-button type="primary" round size="small">确认</el-button>
                            <el-button round size="small" @click="workTimeEdit = false">取消</el-button>
                        </div>
                        <span v-if="!workTimeEdit" class="text">{{ personalInfoForm.workTime }}</span>
                        <span v-if="!workTimeEdit" class="edit-button" @click="workTimeEdit = true">
                            <el-icon>
                                <Edit />
                            </el-icon>
                            <span>编辑</span>
                        </span>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="interest-tag-card info-card" shadow="never">
            <template #header>
                <div class="card-head">
                    <h3>兴趣标签</h3>
                </div>
            </template>
            <div class="interest-tag">
                <el-form :model="interestTagForm" label-width="0px" label-position="left" @submit.prevent="handleSubmit">
                    <el-form-item class="interested">
                        <el-collapse v-model="activeNames" @change="handleChange" accordion>
                            <el-collapse-item name="interested">
                                <template #title>
                                    <div class="tagLabel">
                                        感兴趣
                                    </div>
                                    <div class="addTag">
                                        <el-button :icon="Plus" size="small" type="primary" plain />
                                    </div>
                                    <span class="addTagText">选择标签</span>
                                </template>
                                <div class="tag-box">
                                    <el-tag v-for="item in 30">标签</el-tag>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </el-form-item>
                    <el-form-item class="uninterested">
                        <el-collapse v-model="activeNames" @change="handleChange" accordion>
                            <el-collapse-item name="uninterested">
                                <template #title>
                                    <div class="tagLabel">
                                        感兴趣
                                    </div>
                                    <span class="selected-tags">
                                        <el-tag closable>已选标签</el-tag>
                                    </span>
                                    <div class="addTag">
                                        <el-button :icon="Plus" size="small" type="primary" plain />
                                    </div>
                                    <span class="addTagText" v-if="false">选择标签</span>
                                </template>
                                <div class="tag-box">
                                    <el-tag v-for="item in 30">标签</el-tag>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="identity-tag-card info-card" shadow="never">
            <template #header>
                <div class="card-head">
                    <h3>身份标签</h3>
                </div>
            </template>
            <div class="identity-tag">
                <el-form :model="identityTagForm" label-width="120px" label-position="left">
                    <el-form-item label="我的身份" class="identityTagItem">
                        <el-select v-if="identityTagEdit" class="identityTagInput" v-model="identityTagForm.identityTag">
                            <el-option v-for="item in identityTagForm.identityTagOption" :key="item.id" :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <div v-if="identityTagEdit" class="btn-box">
                            <el-button type="primary" round size="small">确认</el-button>
                            <el-button round size="small" @click="identityTagEdit = false">取消</el-button>
                        </div>
                        <span v-if="!identityTagEdit" class="text">{{ identityTagForm.identityTag }}</span>
                        <span v-if="!identityTagEdit" class="edit-button" @click="identityTagEdit = true">
                            <el-icon>
                                <Edit />
                            </el-icon>
                            <span>编辑</span>
                        </span>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ArrowRight, Edit, Plus } from '@element-plus/icons-vue'
import { ref } from 'vue'

const personalInfoForm = ref({
    nickname: "wHitE_",
    name: "x某",
    gender: "男",
    desc: "java是世界上最好的语言.js",
    address: "圣诞岛",
    birthday: "2003-10-09",
    workTime: "2023-10"
})
const nicknameEdit = ref(false)
const nameEdit = ref(false)
const genderEdit = ref(false)
const descEdit = ref(false)
const addressEdit = ref(false)
const birthdayEdit = ref(false)
const workTimeEdit = ref(false)

const personalFormOption = ref([
    {
        value: "东汉",
        label: "东汉"
    },
    {
        value: "三国",
        label: "三国",
        children: [
            {
                value: "魏国",
                label: "魏国",
            },
            {
                value: "吴国",
                label: "吴国",
            },
            {
                value: "蜀国",
                label: "蜀国",
            }
        ]
    }
])

const interestTagForm = ref({})
const activeNames = ref("interested")
const handleChange = (val) => {
    // console.log(val)
}

const identityTagEdit = ref(false)
const identityTagForm = ref(
    {
        identityTag: "本科",
        identityTagOption: [
            {
                label: "高中卷王",
                value: "高中卷王"
            },
            {
                label: "本科",
                value: "本科"
            },
            {
                label: "硕士",
                value: "硕士"
            },
            {
                label: "博士",
                value: "博士"
            }
        ]
    }
)
const handleSubmit = () => {
    // 阻止默认表单提交行为
    // console.log("阻止默认表单提交行为")
}
</script>

<style lang="scss" scoped>
.info-card {
    margin-bottom: 10px;
}

.head-info {
    display: flex;

    .personal-avatar img {
        margin-right: 20px;
        border-radius: 50%;
        width: 100px;
        height: 100px;
    }

    .personal-nickname {
        font-size: 20px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        span {
            margin-right: 10px;
        }
    }

    .personal-homepage {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #606266;
    }
}

.personalInfoInput {
    width: 40%;
}

.personalForm-item {
    margin-bottom: 30px;
}

.personalForm-item:nth-child(4) div {
    width: 100%;

    div:nth-child(2) {
        width: 80%;
        text-align: right;
    }

    .personalFormTextArea-item {
        display: flex;

        .personalInfoInputTextArea {
            width: 80%;
        }

        span:nth-child(1) {
            flex: 1;
        }
    }
}

.personalForm-item:hover .edit-button {
    display: flex;
}

.btn-box {
    margin-left: 20px;
}

.textarea-btn-box {
    margin-left: 0;
}

.edit-button {
    display: flex;
    align-items: center;
    color: #9286d1;
    cursor: pointer;
    display: none;
    margin-left: 20px;

    .el-icon {
        margin-right: 5px;
    }
}

.interested,
.uninterested {
    display: flex;
    align-items: center;
}

.el-collapse {
    width: 100%;
    border: none;
}

::v-deep .el-collapse-item__wrap,
::v-deep .el-collapse-item__header {
    border: none
}

::v-deep .el-collapse-item__arrow {
    display: none;
}

.tagLabel {
    color: #606266;
    font-size: 14px;
    width: 120px;
    text-align: left;
}

.addTag {
    margin-right: 10px;
}

.addTagText {
    color: #9286d1;
    font-size: 14px;
}

.tag-box {
    margin-left: 120px;
    padding: 20px;
    border: 1px dotted #DCDFE6;
    background-color: #fcfcfc;

    .el-tag {
        margin: 0 0 15px 15px;
    }
}

.selected-tags {
    .el-tag {
        margin-right: 5px;
    }
}

.identityTagInput {
    width: 40%;
}

.identityTagItem:hover .edit-button {
    display: flex;
}
</style>